<script setup>
defineProps({
  currentUser: String,
  currentUserInitial: String,
  showToggleButton: Boolean
});

defineEmits(['logout', 'toggle-sidebar']);
</script>

<template>
  <header class="app-header">
    <div class="header-left">
      <div class="logo">
        <div class="logo-icon">
          <i class="fas fa-comments"></i>
        </div>
        <span>ChatWave</span>
      </div>
    </div>

    <!-- 移动端切换按钮 -->
    <button
        v-if="showToggleButton"
        class="toggle-btn"
        @click="$emit('toggle-sidebar')"
    >
      <i class="fas fa-bars"></i>
    </button>

    <div class="user-info">
      <div class="user-avatar">{{ currentUserInitial }}</div>
      <div>{{ currentUser }}</div>
    </div>

    <div>
      <button class="btn btn-danger" @click="$emit('logout')">
        <i class="fas fa-sign-out-alt"></i>
        退出
      </button>
    </div>
  </header>
</template>

<style scoped>
@import '@/assets/chat.css';

/* 添加切换按钮样式 */
.toggle-btn {
  border: none;
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  display: none;
  background: var(--bg-glass);
  padding: 5px 15px;
  border-radius: 50px;
}

/* 移动端显示切换按钮 */
@media (max-width: 768px) {
  .toggle-btn {
    display: block;
  }
}
</style>
